<!-- 屈光发育档案/影像采集 -->
<template>
  <div class="mod-config">
      <el-form v-show="searchShow" ref="searchForm" :model="dataForm" label-width="100px">
        <el-row>
          <!-- <el-col :span="12">
            <el-form-item label="ID号">
              <el-input v-model="dataForm.personId"></el-input>
            </el-form-item>
          </el-col> -->
          <el-col :span="12">
            <el-form-item label="就诊卡号">
              <el-input v-model="dataForm.cardNum">
								<el-button slot="append" @click="readCardNumHandle">读卡</el-button>
              </el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="6">
            <el-form-item label="姓名">
              <el-input v-model="dataForm.studentName" readonly>
                <el-button slot="append" @click="searchHandle()">查询</el-button>
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="性别">
              <el-select v-model="dataForm.gender" disabled>
                <el-option :value="0" label="男"></el-option>
                <el-option :value="1" label="女"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="出生年月">
              <el-input v-model="dataForm.birthDay" readonly></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="民族">
              <el-select v-model="dataForm.nation">
                <el-option v-for="item in nationalList" :value="item.id" :label="item.name" :key="item.id"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="6">
            <el-form-item label="身份证号">
              <el-input v-model="dataForm.certificateNum" readonly></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="家长姓名">
              <el-input v-model="dataForm.cardNum" readonly></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="联系电话">
              <el-input v-model="dataForm.telPhone" readonly></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="出生体重">
              <el-input v-model="dataForm.birthWeight" readonly>
                <el-button slot="append">KG</el-button>
              </el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="家庭住址">
              <el-input v-model="dataForm.address" readonly></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="是否早产">
              <el-input v-model="dataForm.premature" readonly></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="习惯用手">
              <el-input v-model="dataForm.habitHand" readonly></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="6">
            <el-form-item label="父亲近视史">
              <el-input v-model="dataForm.fatherMyopia" readonly></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="母亲近视史">
              <el-input v-model="dataForm.motherMyopia" readonly></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="开始使用铅笔书写的年龄" label-width="180px">
              <el-input v-model="dataForm.writeAge" readonly></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <el-divider content-position="left">上传图像</el-divider>
      <div>
        <el-form label-width="80px">
          <el-form-item label="影像类型">
            <el-select v-model="dataForm.ImageType">
              <el-option v-for="item in docTypeOptions" :value="item.value" :label="item.label" :key="item.value"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="描述文本">
            <el-input type="textarea" v-model="dataForm.memo"></el-input>
          </el-form-item>
          <el-form-item label="上传文件">
            <el-upload action="/pvm/arcImage/uploadFile" drag list-type="picture-card" :headers="headers" :on-change="uploadChangeHandle" :before-upload="beforeUpload" :on-success="handleSuccess" :file-list="fileList" :data="{imageType: this.dataForm.ImageType, memo: this.dataForm.memo ,personId: this.dataForm.id}">
              <i slot="default" class="el-icon-plus"></i>
              <div slot="file" slot-scope="{file}">
                <img class="el-upload-list__item-thumbnail" :src="file.url" alt="">
                <span class="el-upload-list__item-actions">
                  <span class="el-upload-list__item-preview" @click="handlePictureCardPreview(file)">
                    <i class="el-icon-zoom-in"></i>
                  </span>
                  <span v-if="!disabled" class="el-upload-list__item-delete" @click="handleRemove(file)">
                    <i class="el-icon-delete"></i>
                  </span>
                </span>
              </div>
            </el-upload>
          </el-form-item>
        </el-form>
      </div>

      <el-divider content-position="left">影像列表</el-divider>
      <ul class="el-upload-list el-upload-list--picture-card">
        <li v-for="item in imgList" tabindex="0" class="el-upload-list__item is-ready" style="border-radius: 0;">
          <div style="text-align: center;">{{getNameByType(item.imageType)}}</div>
          <div>
            <img :src="item.src" alt="" class="el-upload-list__item-thumbnail" style="max-width: 150px;max-height: 300px;">
            <span class="el-upload-list__item-actions">
              <span class="el-upload-list__item-preview" @click="handlePictureCardPreview(item)">
                <i class="el-icon-zoom-in"></i>
              </span>
              <span class="el-upload-list__item-delete" @click="handlePictureCard(item)">
                <i class="el-icon-delete"></i>
              </span>
            </span>
          </div>
        </li>
      </ul>
			<duo-image-viewer
        :currentIndex="currentIndex"
        :list="srcList"
        :show.sync="showViewer"
        @open="openCallback"
        @close="closeCallback"/>
      <!-- 弹窗， 添加-编辑 -->
      <search-student v-if="searchStudent" ref="studentDialog" @refreshForm="getStudentData"></search-student>
  </div>
</template>

<script>
  import { mapGetters } from 'vuex'
  import { remote } from '@/api/admin/dict'
  import { filterParams } from '@/util/tools'

  import { uploadFile, getArgImagelst, getImage, delPictureObj } from '@/api/pvm/imageCollect'
  import { fetchNationalList } from '@/api/admin/national'
  import { fetchList, delObj } from '@/api/pvm/checkdata'

  import SearchSchool from '../../teacher/components/SearchSchool'
  import SearchGrade from '../../class/components/SearchGrade'
  import SearchClass from '../../checkdata/SearchClass'
  import searchStudent from './form'
  import store from '@/store'
  export default {
    data() {
      return {
        headers: {
          'Authorization': 'Bearer ' + store.getters.access_token,
        },
        imgData: {
          src: '',
          type: ''
        },
        nationalList: [],
        provinces: [],
        citys: [],
        areas: [],
        typeOptions: [],
        docTypeOptions: [],
        schools: [],
        grades: [],
        classes: [],
        fileList: [],
        imgList: [],
        file: {
          fileId: '',
          fileType: '',
          fileDesc: '',
          filePath: '',
        },
        dataForm: {
          province: '',
          city: '',
          area: '',
          schoolType: '',
          schoolId: '',
          gradeId: '',
          classId: '',
          studentName: '',
          checkDate: '',
          meddleType1: '',
          meddleType2: '',
          ImageType: '角膜地形图'
        },
        dataList: [],
        searchShow: true,
        pageIndex: 1,
        pageSize: 10,
        totalPage: 0,
        dataListLoading: false,
        addOrUpdateVisible: false,
        schoolVisible: false,
        gradeVisible: false,
        classVisible: false,
        dialogImageUrl: '',
        dialogVisible: false,
        disabled: false,
        searchStudent: false,
        currentIndex: 0,
        srcList: [],
        showViewer: false,
      }
    },
    components: {
      // TableForm,
      SearchSchool,
      SearchGrade,
      SearchClass,
      searchStudent,
    },
    created() {
      remote('doc_type').then(response => {
        this.docTypeOptions = response.data.data
      })
      this.getNationalList()
      this.getDataList()
      // this.getImgdata()
    },
    computed: {
      ...mapGetters(['permissions'])
    },
    methods: {
      // 获取民族列表
      getNationalList(){
        fetchNationalList({ current: 1, size: 100 }).then(response => {
          if(response.data.code == '0'){
            this.nationalList = response.data.data.records
          }else{
            this.$message.error(response.data.msg)
          }
        })
      },
      // 获取数据列表
      getDataList() {
        this.dataListLoading = true
        let params1 = {
          current: this.pageIndex,
          size: this.pageSize
        }
        let params2 = filterParams(this.dataForm)
        fetchList(Object.assign(params1, params2)).then(response => {
          if(response.data.code == '0'){
            this.dataList = response.data.data.records
            this.totalPage = response.data.data.total
          }else{
            this.$message.error(response.data.msg)
          }
          this.dataListLoading = false
        })
      },
      // 每页数
      sizeChangeHandle(val) {
        this.pageSize = val
        this.pageIndex = 1
        this.getDataList()
      },
      // 当前页
      currentChangeHandle(val) {
        this.pageIndex = val
        this.getDataList()
      },
      // 新增 / 修改
      addOrUpdateHandle(id) {
        this.addOrUpdateVisible = true
        this.$nextTick(() => {
          this.$refs.addOrUpdate.init(id)
        })
      },
      // 读卡
      readCardNumHandle(){

      },
      // 删除
      deleteHandle(id) {
        this.$confirm('是否确认删除ID为' + id, '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(function() {
          return delObj(id)
        }).then(response => {
          if(response.data.code == '0'){
            this.$message.success('删除成功')
            this.getDataList()
          }else{
            this.$message.error(response.data.msg)
          }
        })
      },
      searchChange() {
        this.pageIndex = 1;
        this.getDataList()
      },
      // 搜索清空
      searchReset() {
        this.$refs.searchForm.resetFields();
        this.getDataList(this.page)
      },
      handleSearchShow() {
        this.searchShow = !this.searchShow;
      },
      searchHandle() {
        this.searchStudent = true
        this.$nextTick(() => {
          this.$refs.studentDialog.init()
        })
      },
      // 获取学生信息
      getStudentData(data) {
        this.dataForm = data;
        this.$set(this.dataForm, 'personId', data.id)
        this.$set(this.dataForm, 'studentId', data.id)
        this.$set(this.dataForm, 'studentName', data.name)
        this.$set(this.dataForm, 'ImageType', '角膜地形图')
        this.$set(this.dataForm, 'memo', '')
        this.$set(this.dataForm,'nation',data.nation)
        this.srcList = []
        getArgImagelst(data.id).then(response => {
          if(response.data.code == '0'){
            let dat = response.data;
            this.imgList = response.data.data
            for (let i = 0; i < this.imgList.length; i++) {
              this.imgData.type = '测试';
              this.imgList[i].src=this.imgList[i].path
              this.srcList.push(this.imgList[i].path)
            }
          }else{
            this.$message.error(response.data.msg)
          }
        })
      },
      // 刷新回调
      refreshChange() {
        this.getDataList(this.page)
      },
      openDialog(type) {
        if (type == 'school') {
          let form = {
            province: this.dataForm.province,
            city: this.dataForm.city,
            area: this.dataForm.area,
            schoolType: this.dataForm.schoolType
          }
          this.schoolVisible = true
          this.$nextTick(() => {
            this.$refs.schoolDialog.init(JSON.stringify(form))
          })
        } else if (type == 'grade') {
          if (this.dataForm.schoolId) {
            let form = {
              schoolType: this.dataForm.schoolType
            }
            this.gradeVisible = true
            this.$nextTick(() => {
              this.$refs.gradeDialog.init(JSON.stringify(form))
            })
          } else {
            this.$message.warning('请先选择学校')
          }
        } else if (type == 'class') {
          if (this.dataForm.gradeId) {
            let form = {
              schoolId: this.dataForm.schoolId,
              schoolName: this.dataForm.schoolName,
              gradeId: this.dataForm.gradeId,
              gradeName: this.dataForm.gradeName
            }
            this.classVisible = true
            this.$nextTick(() => {
              this.$refs.classDialog.init(JSON.stringify(form))
            })
          } else {
            this.$message.warning('请先选择学校年级')
          }
        }

      },
      getSchoolData(val) {
        this.$set(this.dataForm, 'schoolId', val.id)
        this.$set(this.dataForm, 'schoolName', val.schoolName)
        this.$set(this.dataForm, 'schoolType', val.schoolType)
      },
      getGradeData(val) {
        this.$set(this.dataForm, 'gradeId', val.id)
        this.$set(this.dataForm, 'gradeName', val.gradeName)
      },
      getClassData(val) {
        this.$set(this.dataForm, 'classId', val.id)
        this.$set(this.dataForm, 'className', val.className)
      },
      uploadChangeHandle(file, fileList) {
        this.fileList = fileList
      },
      //  文件状态改变；添加文件&上传成功&上传失败调用
      handleRemove(file) {
        this.fileList.forEach((item, index) => {
          if (item.uid == file.uid) {
            this.fileList.splice(index, 1)
          }
        })
      },
      // 文件上传之前
      beforeUpload(file){
        if(!this.dataForm.personId){
          this.$message.warning('请选择学生')
          return false
        }
        if(!this.dataForm.ImageType){
          this.$message.warning('请选择影像类型')
          return false
        }
        if(!this.dataForm.memo){
          this.$set(this.dataForm,'memo','')
        }
      },
      // 文件上传成功
      handleSuccess(response, file, fileList) {
        this.$message.success('上传成功')
        this.getStudentData(this.dataForm)
      },
      handlePictureCardPreview(file) {
        if (file) {
          this.srcList.forEach((item,index) => {
            if(item == file.path){
              this.currentIndex = index
            }
          })
        }
        this.showViewer = true
      },
      // 根据影像类型查询名字
      getNameByType(type){
        let obj = {}
        obj = this.docTypeOptions.find(item => {
          return item.value == type
        })
        if(obj && obj.label){
          return obj.label
        }
      },
      // 删除影像列表
      handlePictureCard(item) {
        this.$confirm('是否删除影像信息?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          return delPictureObj(item.id)
        }).then(response => {
          if(response.data.code == '0'){
            this.srcList.forEach((src,index) => {
              if(src == item.path){
                this.srcList.splice(index,1)
              }
            })
            this.$message.success('删除成功')
            this.getStudentData(this.dataForm)
          }else{
            this.$message.error(response.data.msg)
          }
        })
      },
      openCallback(){},
			closeCallback(){
			  this.showViewer = false
			}
    }
  }
</script>

<style lang="scss" scoped>
  /deep/ .el-col {
    margin-bottom: 0 !important;
  }

  /deep/ .el-upload--picture-card {
    border: none;
  }

  /deep/ .el-upload-dragger {
    width: 150px;
    height: 150px;
    border: none;
    box-sizing: border-box;
  }

  .avue-upload__avatar,
  .avue-upload__icon,
  .el-upload--picture-card,
  .el-upload-list--picture-card .el-upload-list__item {
    line-height: 25px !important;
  }

  .miui-table {
    width: 100%;
    margin: 10px 0;
    background-color: #b1e2ec3b;

    tr th {
      background-color: #f4f5f7;
    }

    tr th,
    tr td {
      padding: 10px 8px;
      border: solid 1px #fff;
      text-align: center;
    }

    .miui-table-header td {
      background-color: #7898a8;
      color: #fff;
    }

    .miui-table-tbody {
      background-color: #cadee8;
    }

    .miui-table-label {
      width: 120px;
      background-color: #b2d5f6;
    }
  }
</style>
